<template>
	<Map>
		<template #left>
			<div class="left">
				<BoxWrap>
					<template #title>数据建模</template>
					<BtnList />
					<div class="modelBrand">
						<div class="modelBrand_left">
							<p>70</p>
							<p>预警总数</p>
						</div>
						<div class="modelBrand_right">
							<div><span>红色预警</span> <span>86</span></div>
							<div><span>蓝色预警</span> <span>86</span></div>
						</div>
					</div>
					<div id="model">
						<Table
							:tableHeader="tableHeader"
							:tableData="tableData"
							type="grape"
						/>
					</div>
				</BoxWrap>
				<BoxWrap>
					<template #title>预警主题分布</template>
					<BtnList />
					<div class="dot">预警主题分布</div>
					<div id="topic1"></div>
				</BoxWrap>
			</div>
		</template>
		<template #center>
			<div class="middle">
				<img src="../assets/img/huweiyun.png" alt="" />
			</div>
		</template>
		<template #right>
			<div class="right">
				<BoxWrap>
					<template #title>预警主题分布</template>
					<BtnList />
					<div id="topic2"></div>
				</BoxWrap>
				<BoxWrap>
					<template #title>预警列表</template>
					<BtnList />
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="">
							<el-input
								v-model="formInline.user"
								placeholder="输入以搜索"
								clearable
							/>
						</el-form-item>
						<el-form-item label="">
							<el-date-picker
								v-model="formInline.date"
								type="date"
								placeholder="选择日期"
								clearable
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">搜索</el-button>
							<span style="display: inline-block; width: 30px"></span>
							<el-button type="primary" @click="onSubmit">重置</el-button>
						</el-form-item>
					</el-form>
					<div id="list">
						<Table
							:tableHeader="tableHeader"
							:tableData="tableData"
							type="grape"
						/>
					</div>
				</BoxWrap>
			</div>
		</template>
	</Map>
</template>

<script setup lang="ts">
import BoxWrap from '../components/boxWrap.vue'
import BtnList from '../components/btnList.vue'
import Table from '../components/tableList.vue'
import { useEcharts } from '../hooks/useEcharts'
import { ref, onMounted, nextTick, reactive } from 'vue'
import chartOptions from './componet/chart.js'
import { deepClone } from '../utils/deepClone'
import Map from '../components/map.vue'
let { bar } = new chartOptions()
const formInline = reactive({
	user: '',
	region: '',
	date: '',
})
const onSubmit = () => {
	console.log('submit!')
}
const dateP = ref('')
let tableHeader = ref([
	{
		props: 'id',
		name: '编号',
	},
	{
		props: 'time',
		name: '时间',
	},
	{
		props: 'where',
		name: '场所',
	},
	{
		props: 'topic',
		name: '主题',
	},
	{
		props: 'status',
		name: '状态',
	},
])
let tableData = ref([
	{
		id: '001',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '002',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '003',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '002',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
	{
		id: '003',
		time: '2002-12-3',
		where: '行',
		topic: '未按要求免单',
		status: '未处理',
	},
])
onMounted(() => {
	nextTick(() => {
		getTopicDistance('topic1')
		getTopicDistance('topic2')
	})
})
// 预警主题分布1
const getTopicDistance = (type: string) => {
	let options1 = deepClone(bar())
	switch (type) {
		case 'topic1':
			let chart1Data: Array<{
				name: string
				value: number
			}> = [
				{
					name: '食品安全',
					value: 80,
				},
				{
					name: '公安未立案',
					value: 90,
				},
				{
					name: '卫健委未履行监管',
					value: 70,
				},
				{
					name: '酒店旅馆未登记',
					value: 50,
				},
				{
					name: '场所未免票',
					value: 80,
				},
				{
					name: '学校周边禁设行业',
					value: 50,
				},
				{
					name: '行政机关未监督',
					value: 30,
				},
			]
			options1.xAxis.data = chart1Data.reduce((arr, val) => {
				arr.push(val.name)
				return arr
			}, [] as Array<any>)
			options1.series[0].data = chart1Data
			break
		case 'topic2':
			let dataBar: Array<{
				name: string
				value1: number
				value2: number
				rate: number
			}> = [
				{
					name: '1月',
					value1: 900,
					value2: 900,
					rate: 1200,
				},
				{
					name: '2月',
					value1: 600,
					value2: 500,
					rate: 800,
				},
				{
					name: '3月',
					value1: 700,
					value2: 800,
					rate: 1100,
				},
				{
					name: '4月',
					value1: 400,
					value2: 500,
					rate: 700,
				},
				{
					name: '5月',
					value1: 900,
					value2: 300,
					rate: 1200,
				},
				{
					name: '6月',
					value1: 900,
					value2: 400,
					rate: 1200,
				},
				{
					name: '7月',
					value1: 300,
					value2: 700,
					rate: 1000,
				},
			]
			options1.legend.show = true
			options1.grid.bottom = 0
			options1.series[0].name = '蓝色预警'
			options1.series[0].itemStyle.normal.color = '#213FF7'
			options1.series[0].data = dataBar.map((val) => val.value1)
			options1.series[1] = {
				name: '红色预警',
				type: 'bar',
				barWidth: '15%',
				itemStyle: {
					normal: {
						color: '#D3783D',
						barBorderRadius: 5,
					},
				},
				data: dataBar.map((val) => val.value2),
			}
			options1.series[2] = {
				name: '全部',
				type: 'line',
				itemStyle: {
					normal: {
						color: '#fff',
					},
				},
				data: dataBar.map((val) => val.rate),
			}
			break
	}

	chartMiddle(type, options1) //警情报警记录
}
// 预警主题分布二
const chartMiddle = (id: string, option: object) => {
	let dom = document.getElementById(id)
	let { myecharts, echarts } = useEcharts(dom)
	myecharts.setOption(option)
}
</script>

<style lang="less" scoped>
// padding: 28px 46px 0 46px;
// display: flex;
// justify-content: space-between;
.left,
.right {
	width: 515px;
	> div {
		height: 423px;
		padding: 20px;
	}
}
.right {
	margin-right: 22px;
}
.left {
	margin-left: 22px;
	.modelBrand {
		height: 81px;
		display: flex;
		justify-content: space-around;
		.modelBrand_left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p {
				color: #fff;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				&:first-child {
					font-size: 20px;
				}
			}
		}
		.modelBrand_right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			div {
				color: #fff;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				span {
					&:last-child {
						margin-left: 10px;
						font-size: 18px;
						color: #3eb9ff;
					}
				}
				&:first-child {
					span {
						&:last-child {
							margin-left: 10px;
							font-size: 18px;
							color: #df655d;
						}
					}
				}
			}
		}
	}
	#model {
		margin-top: 5px;
	}
	.dot {
		position: relative;
		color: #8799c0;
		font-size: 14px;
		&::before {
			position: absolute;
			left: -10px;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 5px;
			height: 5px;
			border-radius: 5px;
			background-color: #369ad5;
		}
	}
}
.middle {
	display: flex;
	align-items: center;
	justify-content: center;
}

/deep/ .el-input__wrapper {
	width: 100px;
	background-color: transparent !important;
}
/deep/ .el-date-editor.el-input {
	width: 120px;
}
.el-input__wrapper {
	width: 100px;
}

#topic1,
#topic2 {
	height: 300px;
}
</style>
